<%-- 
    Document   : CustGetListOfReservableUnits
    Created on : Oct 3, 2011, 1:27:34 AM
    Author     : James
--%>

<%@page import="EntityState.ReservableUnitState"%>
<%@page import="BusinessLogic.Constants"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.List, java.util.ArrayList"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Lingua123 - Your shortcut to a new language</title>
        <link rel="stylesheet" href="../customer/main_style_sheet.css" />
        <link rel='stylesheet' type='text/css' href="../jQuery/css/sunny/jquery-ui-1.8.13.custom.css"  />
        <script language="javascript" type="text/javascript" src="../TransactWeb/js/jquery.form.js"></script>
        <script type='text/javascript' src='../jQuery/jquery-1.6.1.min.js'></script>
        <script type='text/javascript' src='../jQuery/jquery-ui-1.8.13.custom.min.js'></script>
        <script type="text/javascript" src="../customer/script/Utilities.js"></script>
        <script type="text/javascript">
            <!--
            window.onload = showPage('Login', 'login_panel');
            
            var startTime, endTime;
            
            function getUnitInfo() 
            {
                $('#unitInfo').html('');
                $('#userInfo').html('');
                $.ajax({
                    type: "GET",
                    url:  "CustGetInfo",
                    data: {
                        action: <%= Constants.GET_RESERVABLE_UNIT_INFO %>,
                        id: $('#reservableUnitID').val()
                    },
                    success: function(response) {
                        $('#unitInfo').html($(response).find('unitInfo').text());
                        $('#userInfo').html($(response).find('userInfo').text());
                        $('#minimumLength').val($(response).find('minimumLength').text());
                        $('#maximumLength').val($(response).find('maximumLength').text());
                        $('#minimumLead').val($(response).find('minimumLead').text());
                        $('#maximumLead').val($(response).find('maximumLead').text());
                        var current = new Date().getTime();
                        if ($('#minimumLength').val() == $('#maximumLength').val() || $('#maximumLength').val() == '0') {
                            $('#date1').datepicker({
                                defaultDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                minDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                dateFormat: 'MM dd, yy',
                                onSelect: function(dateText, inst) {
                                    var date  = new Date(dateText);
                                    startTime = date.getTime();
                                }
                            });

                        } else {
                            
                            $('#date1').datepicker({
                                defaultDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                maxDate: new Date(current + $(response).find('maximumLead').text()*60*1000),
                                minDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                dateFormat: 'MM dd, yy',
                                onSelect: function(dateText, inst) {
                                    var date  = new Date(dateText);
                                    startTime = date.getTime();
                                }
                            });
                            
                            $('#date2').datepicker({
                                defaultDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                maxDate: new Date(current + $(response).find('maximumLead').text()*60*1000),
                                minDate: new Date(current + $(response).find('minimumLead').text()*60*1000),
                                dateFormat: 'MM dd, yy',
                                onSelect: function(dateText, inst) {
                                    var date  = new Date(dateText);
                                    endTime = date.getTime();
                                }
                            });
                        }
                    },
                    dataType: "xml"
                });
            }
            
            $(document).ready(function() {
                $('#reservationForm').submit(function () { 
                    $('#startTime').val(startTime + $('#hour1').val()*3600*1000 + $('#minute1').val()*60*1000);
                    if ($('#minimumLength').val() == $('#maximumLength').val()) {
                        $('#endTime').val($('#startTime').val() + $('#minimumLength').val()*60*1000);
                    } else $('#endTime').val(endTime + $('#hour2').val()*3600*1000 + $('#minute2').val()*60*1000);
                    $.ajax({
                        type: "GET",
                        url:  "CustMakeReservation",
                        data: {
                            reservableUnitID: $('#reservableUnitID').val(),
                            numOfPeople: $('#numOfPeople').val(),
                            startTime: $('#startTime').val(),
                            endTime: $('#endTime').val(),
                            name: $('#name').val(),
                            countryCode: $('#countryCode').val(),
                            phone: $('#phone').val()
                        },
                        success: function(response) {
                            var status = $(response).find("status").text();
                            $("#addCubeStatus").html(status);
                        },
                        dataType: "xml"
                    });
                });
            });
            
//            $(document).ready(function() {
//                // bind 'myForm' and provide a simple callback function
//                $('#reservationForm').ajaxForm({
//                    success: function(response){
//                        
//                    },
//                    dataType: "xml"
//                });
//                
//            }); 
            //-->
        </script>
    </head>
    <body>
        <div id="wrapper">
            <h1>Lingua123</h1>
            <div id="nav">
                <a href="CustGetListOfPartners?action=<%= Constants.GET_LIST_OF_PARTNERS %>&id=0">Our partners</a>
                <a href="Redirect?page=search&target=ad">About Us</a>
                <a href="Redirect?page=about_us">Our Languages</a>
                <a href="Redirect?page=contact">Support</a>
            </div>
            <div id="body">
                <div id="body-top">
                    <div id="body-bot">
                        <div id="welcome">
                            <img src="../customer/images/books2.jpg" width="276" height="238" alt="Pic 1" />
                        </div>
                        <div id="login_panel"></div>
                        <div id="content">
                            <%
                                ArrayList data = (ArrayList) request.getAttribute("data");
                                int result = ((Integer) data.get(0)).intValue();
                                if (result == Constants.STATUS_SESSION_EXPIRED) {
                            %>
                            Session expired. Please login again.
                            <%
                                } else if (result == Constants.STATUS_SUCCESSFUL) {
                                    List<ReservableUnitState> units = (List<ReservableUnitState>) data.get(1);
                            %>
                            <form action="CustMakeReservation" id="reservationForm" method="GET" onsubmit="return false;">
                                <input type="hidden" id="minimumLength" />
                                <input type="hidden" id="maximumLength" />
                                <input type="hidden" id="minimumLead" />
                                <input type="hidden" id="maximumLead" />
                                <input type="hidden" id="startTime" name="startTime">
                                <input type="hidden" id="endTime" name="endTime">
                                <table class="white">
                                    <tr>
                                        <td>Select a Unit</td>
                                        <td>
                                            <select id="reservableUnitID" name="reservableUnitID" onchange="getUnitInfo();">
                                                <option value="0">Select one</option>
                                                <%
                                                    for (ReservableUnitState rus : units) {
                                                %> 
                                                <option value="<%= rus.getId() %>"><%= rus.getName() %></option>
                                                <%
                                                    }
                                                %>
                                            </select>
                                        </td>
                                    </tr>
                                </table>`
                                <div id="unitInfo"></div>
                                <div id="userInfo"></div>
                                <button type="submit">Confirm</button>
                            </form>
                            <%
                                }
                            %>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
